<template>
    <div class="pointsoperateCounty">
        <topBar :title="title"></topBar>
        <div class="echarts">
            <div class="top">
                <div class="left">
                    <negativeValue :chartsData="chartsData"></negativeValue>
                </div>
                <div class="right">
                    <div v-for="(item,index) in lineList" :key="index">
                        <lineEcharts :id="'lineEcharts' + index" :lineData="item"></lineEcharts>
                    </div>
                </div>
            </div>
            <div class="bot">
                <div v-for="(item, index) in botLineData" :key="index">
                    <lineEcharts
                    :id="'lineEchartsBot' + index"
                    :lineData="item"
                    ></lineEcharts>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { growthTb, pointCounty } from "@/api/codeIncome/analysis";
import topBar from "./topBar";
import negativeValue from "../showEchart/negativeValue";
import lineEcharts from '../showEchart/lineEcharts';
export default {
    name: "pointsoperateCounty",
    components: {
        topBar,
        negativeValue,
        lineEcharts
    },
    props: {
        searchData: {
        type: Object,
        default: {},
        },
    },
    watch: {
        searchData: {
        handler(newName) {
            this.getData();
            this.getlineData()
        },
        deep: true,
        },
    },
    data(){
        return{
            title: "码号收入 – 分经营单元（县分）",
            chartsData: {},
            lineList: [],
            botLineData: [],
        }
    },
    created() {},
    mounted() {
      this.getData();
      this.getlineData()
    },
    methods: {
    // 获取码号收入整体趋势
    getData() {
      growthTb({
        acctMonth: this.searchData.acctMonth,
        areaId: this.searchData.areaId,
      }).then((res) => {
        if (res.code == 200) {
            let obj = {}
            obj['areaName'] = res.data.dataList[0].datas
            obj['tbInrease'] = res.data.dataList[1].datas
            this.chartsData = obj
        }
      });
    },
    getlineData() {
        this.lineList = []
        pointCounty({
        acctMonth: this.searchData.acctMonth,
        areaId: this.searchData.areaId,
        flag: 2
      }).then(res => {
            if (res.code == 200) {
                let data = res.data
                let arr = []
                data.forEach(item => {
                    let obj = {}
                    obj['title'] = item.characterList[0].text
                    obj['lastdata'] = item.dataList[0].datas
                    obj['indata'] = item.dataList[1].datas
                    arr.push(obj)
                });
                this.lineList = arr.slice(0, 8);
                this.botLineData = arr.slice(8, arr.length)
            }
        })
    }
  }
}
</script>

<style scoped>
.pointsoperateCounty {
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
}
</style>
<style scoped lang="scss">
.pointsoperateCounty {
  margin-top: 20px;
  .echarts {
      width: 100%;
      height: auto;
      .top {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        .left {
            width: 40%;
            height: 800px;
        }
        .right {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            >div {
                width: 50%;
                height: 200px;
            }
        }
      }
      .bot {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        > div {
          width: 33.33%;
          height: 200px;
        }
    }
  }
}
</style>
